<template>
	<view 
		class="mine-content"
	>
		<view class="btns-wrap">
			<scroll-view class="scroll-wrap" scroll-x="true">
				<view class="btn-item" v-for="(item,index) in btnsList" :key="index">
					<view class="btn-view">
						<image class="image" :src="item.img"></image>
						<text class="text">{{item.text}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="actions-wrap">
			<!-- #ifdef APP-PLUS -->
			<view class="action-item">
				<view class="action-item-icon">
					<text class="iconfont icon-local-music1 icon-yule_yinlediantai"></text>
				</view>
				<view class="action-item-label">
					<text class="text">本地音乐</text>
					<text class="count">(0)</text>
				</view>
			</view>
			<!-- #endif -->
			<view class="action-item">
				<view class="action-item-icon">
					<text class="iconfont icon-lately-playing icon-duoxuanpt"></text>
				</view>
				<view class="action-item-label">
					<text class="text">最近播放</text>
					<text class="count">{{subcount.newProgramCount}}</text>
				</view>
			</view>
			<view class="action-item">
				<view class="action-item-icon">
					<text class="iconfont icon-radio-station"></text>
				</view>
				<view class="action-item-label">
					<text class="text">我的电台</text>
					<text class="count">{{subcount.djRadioCount}}</text>
				</view>
			</view>
			<view class="action-item">
				<view class="action-item-icon">
					<text class="iconfont icon-collection"></text>
				</view>
				<view class="action-item-label">
					<text class="text">我的收藏</text>
					<text class="count">(0)</text>
				</view>
			</view>
		</view>
		<view class="song-sheet">
			<view class="song-action" @tap="cjCollapse = !cjCollapse">
				<view class="arrow-wrap">
					<view class="arrow" :class="{'arrow-down':cjCollapse, 'arrow-right': !cjCollapse}"></view>
				</view>
				<view class="title-wrap">
					<text class="title">创建的歌单</text>
					<text class="count">({{subcount.createdPlaylistCount}})</text>
				</view>
				<view class="btn-wrap">
					<text class="add-btn"></text>
				</view>
				<view class="btn-wrap">
					<text class="more-btn"></text>
				</view>
			</view>
			<view class="song-sheet-list" v-if="cjCollapse1">
				<view v-for="(item, index) in createdSongSheetList" :key="index">
					<my-song-sheet-item
						:imgUrl="item.coverImgUrl"
						:name="item.name"
						:trackCount="item.trackCount"
					></my-song-sheet-item>
				</view>
			</view>
		</view>
		<view class="song-sheet">
			<view class="song-action" @tap="scCollapse = !scCollapse">
				<view class="arrow-wrap">
					<view class="arrow" :class="{'arrow-down':scCollapse, 'arrow-right': !scCollapse}"></view>
				</view>
				<view class="title-wrap">
					<text class="title">收藏的歌单</text>
					<text class="count">({{subcount.subPlaylistCount}})</text>
				</view>
				<view class="btn-wrap">
					<text class="more-btn"></text>
				</view>
			</view>
			<view class="song-sheet-list" v-if="scCollapse1">
				<view v-for="(item, index) in collectSongSheetList" :key="index">
					<my-song-sheet-item
						:imgUrl="item.coverImgUrl"
						:name="item.name"
						:trackCount="item.trackCount"
						:nickname="item.creator.nickname"
					></my-song-sheet-item>
				</view>
			</view>
		</view>
		<uni-notice-bar 
			text="uni-app目前不支持cookie，本项目中一些接口需要使用到cookie来做登录验证，所以这些模块暂时无法实现，待以后解决,本页面内容是静态数据">
		</uni-notice-bar>
	</view>
</template>

<script>
	import uniNoticeBar from "@/components/uni-notice-bar/uni-notice-bar.vue";
	import mySongSheetItem from "@/components/my-song-sheet-item/my-song-sheet-item.vue";
	
	import subcount from "@/json/subcount.json";
	import songsheetlist from '@/json/song-sheet.json';
	
	import { mapGetters } from 'vuex'
	export default {
		components: {
			uniNoticeBar, mySongSheetItem
		},
		data() {
			return {
				cjCollapse: true,
				scCollapse: true,
				cjCollapse1: true,
				scCollapse1: true,
				btnsList: [
					{text: '亲子频道', img: '../../static/imgs/main/21.png'},
					{text: 'Sati空间', img: '../../static/imgs/main/20.png'},
					{text: '最新电音', img: '../../static/imgs/main/19.png'},
					{text: '私人FM', img: '../../static/imgs/main/18.png'},
					{text: '私藏推荐', img: '../../static/imgs/main/17.png'},
					{text: '古典专区', img: '../../static/imgs/main/16.png'},
					{text: '跑步FM', img: '../../static/imgs/main/15.png'},
					{text: '小冰电台', img: '../../static/imgs/main/13.png'},
					{text: '爵士电台', img: '../../static/imgs/main/12.png'},
					{text: '驾驶模式', img: '../../static/imgs/main/11.png'},
					{text: '编辑', img: '../../static/imgs/main/14.png'}
				],
				subcount: {},
				createdSongSheetList: [],
				collectSongSheetList: []
			}
		},
		watch: {
			cjCollapse(bool) {
				setTimeout(() => {
					this.cjCollapse1 = bool;
				}, 300)
			},
			scCollapse(bool) {
				setTimeout(() => {
					this.scCollapse1 = bool;
				}, 300)
			}
		},
		computed: {
			...mapGetters(['userId'])
		},
		created() {
			// setTimeout(() => {
			// 	this.subcount = subcount;
			// 	this.createdSongSheetList = songsheetlist.playlist.filter(t => !t.subscribed);
			// 	this.collectSongSheetList = songsheetlist.playlist.filter(t => t.subscribed);
			// }, 300)
			this.getUserSubcount();
			this.getList();
		},
		methods: {
			update() {
				setTimeout(() => {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			async getUserSubcount() {
				const res = await this.$request('/user/subcount');
				this.subcount = res;
			},
			async getList() {
				try{
					const res = await this.$request(`/user/playlist?uid=${this.userId}`);
					this.createdSongSheetList = res.playlist.filter(t => !t.subscribed);
					this.collectSongSheetList = res.playlist.filter(t => t.subscribed);
				} catch(err) {
					console.log(err);
				}
			}
		}
	}
</script>

<style lang="scss">
	.mine-content{
		width: 100%;
		height:100%;
		overflow-y: auto;
		background: #eee;
		.btns-wrap{
			background: #fff;
			width: 100%;
			height: 180upx;
			.scroll-wrap{
				white-space: nowrap;
				width: 100%;
				height: 100%;
				.btn-item{
					width: 168upx;
					height: 168upx;
					display: inline-block;
					.btn-view{
						width: 100%;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						.image{
							width: 92upx;
							height: 92upx;
							margin-bottom: 10upx;
						}
						.text{
							font-size: 24upx;
							color: #777;
						}
					}
				}
			}
		}
		.actions-wrap{
			background: #fff;
			margin-bottom: 20upx;
			border-top: 1upx solid #eee;
			.action-item{
				height: 100upx;
				display: flex;
				&:last-child{
					.action-item-label{
						border-bottom: none;
					}
				}
				.action-item-icon{
					width: 140upx;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center; 
					.iconfont{
						font-size: 50upx;
						color: #333;
					}
				}
				.action-item-label{
					flex: 1;
					color: #333;
					border-bottom: 2upx solid #eee;
					display: flex;
					align-items: center;
					.text{
						font-size: 32upx;
						margin-right: 10upx;
					}
					.count{
						color: #777;
						font-size: 26upx;
					}
				}
			}
		}
		.song-sheet{
			width: 100%;
			background: #fff;
			.song-action{
				height: 100upx;
				display: flex;
				align-items: center;
				.arrow-wrap{
					width: 70upx;
					height: 100upx;
					display: flex;
					justify-content: center;
					align-items: center;
					.arrow{
						width: 16upx;
						height: 16upx;
						border-top: 2upx solid #333;
						border-right: 2upx solid #333;
						transition: all 0.3s ease;
						position: relative;
					}
					.arrow-right{
						transform: rotate(45deg);
						right: 0;
						top: 0;
					}
					.arrow-down{
						transform: rotate(135deg);
						right: -6upx;
						top: -6upx;
					}
				}
				.title-wrap{
					flex: 1;
					display: flex;
					align-items: center;
					.title{
						font-size: 38upx;
						font-weight: 500;
						color: #333;
						margin-right: 10upx;
					}
					.count{
						font-size: 26upx;
						color: #777;
					}
				}
				.btn-wrap{
					width: 70upx;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					.add-btn{
						@include add-btn(28upx, #333);
					}
					.more-btn{
						@include more-btn(#333);
					}
				}
			}
			.song-sheet-list{
				width: 100%;
			}
		}
	}
</style>
